<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>个人主页（我的视角）(动态列表、好友列表)</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- 引入字体 -->
    <script src="../../js/libs/webfontloader.min.js" th:src="@{/js/libs/webfontloader.min.js}"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>
    <!-- 引入bootstrap css -->
    <link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-reboot.css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
    <link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap.css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
    <link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-grid.css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
    <!-- 引入主要 css -->
    <link rel="stylesheet" type="text/css" href="../../css/main.css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" href="../../css/fonts.min.css" th:href="@{/css/fonts.min.css}">

</head>
<body class="page-has-left-panels">
<!-- Preloader 预加载 -->
<div id="hellopreloader">
    <div class="preloader">
        <svg width="45" height="45" stroke="#fff">
            <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="8">
                    <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                             values="6;1;2;3;4;5;6"/>
                </circle>
            </g>
        </svg>
        <div class="text">Loading ...</div>
    </div>
</div>
<!-- ... end Preloader 结束预加载-->
<!-- Fixed Sidebar Left 左侧菜单 -->
<div class="fixed-sidebar">
    <!--折叠时左侧菜单-->
    <div class="fixed-sidebar-left sidebar--small" id="sidebar-left">
        <a href="person_main.html" class="logo">
            <div class="img-wrap">
                <img src="../../img/logo.png" th:src="@{/img/logo.png}" alt="Olympus">
            </div>
        </a>
        <div class="mCustomScrollbar" data-mcs-theme="dark">
            <ul class="left-menu">
                <!--切换菜单栏-->
                <li>
                    <a href="#" class="js-sidebar-open">
                        <svg class="olymp-menu-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="切换菜单栏">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--新闻广场-->
                <li>
                    <a href="news.html">
                        <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="新闻广场">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--好友动态-->
                <li>
                    <a href="publish_friends.html">
                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="好友动态">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--个人中心-->
                <li>
                    <a href="person_detail.html">
                        <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                             data-placement="right" data-original-title="个人中心">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--end折叠时左侧菜单-->
    <!--展开时左侧菜单-->
    <div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1">
        <a href="person_main.html" class="logo">
            <div class="img-wrap">
                <img src="../../img/logo.png" th:src="@{/img/logo.png}" alt="Olympus">
            </div>
            <div class="title-block">
                <h6 class="logo-title">olympus</h6>
            </div>
        </a>
        <div class="mCustomScrollbar" data-mcs-theme="dark">
            <ul class="left-menu">
                <!--切换菜单栏-->
                <li>
                    <a href="#" class="js-sidebar-open">
                        <svg class="olymp-close-icon left-menu-icon">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                        </svg>
                        <span class="left-menu-title">切换菜单栏</span>
                    </a>
                </li>
                <!--新闻广场-->
                <li>
                    <a href="news.html">
                        <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                        </svg>
                        <span class="left-menu-title">新闻广场</span>
                    </a>
                </li>
                <!--好友动态-->
                <li>
                    <a href="publish_friends.html">
                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                        </svg>
                        <span class="left-menu-title">好友动态</span>
                    </a>
                </li>
                <!--个人中心-->
                <li>
                    <a href="person_detail.html">
                        <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                             data-placement="right" data-original-title="">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                        </svg>
                        <span class="left-menu-title">个人中心</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--end展开时左侧菜单-->
</div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->
<!-- Header-BP 头部导航栏-->
<header class="header" id="site-header">
    <div class="page-title">
        <h6>个人主页</h6>
    </div>
    <div class="header-content-wrapper">
        <!--数据：搜索-->
        <form class="search-bar w-search notification-list friend-requests">
            <div class="form-group with-button">
                <input class="form-control" placeholder="搜索人或事……" type="text" required/>
                <button>
                    <svg class="olymp-magnifying-glass-icon">
                        <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use>
                    </svg>
                </button>
            </div>
        </form>
        <!--end数据：搜索-->
        <div class="control-block">
            <!--导航栏用户-->
            <div class="author-page author vcard inline-items more">
                <div class="author-thumb">
                    <!--数据：当前用户头像-->
                    <img alt="author" src="../../img/author-page.jpg" th:src="@{${session.user.getHeadPhoto()}}" class="当前用户">
                    <div class="more-dropdown more-with-triangle">
                        <div class="mCustomScrollbar" data-mcs-theme="dark">
                            <div class="ui-block-title ui-block-title-small">
                                <h6 class="title">当前</h6>
                            </div>
                            <ul class="account-settings">
                                <li>
                                    <a href="person_detail.html">
                                        <svg class="olymp-menu-icon">
                                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                                        </svg>
                                        <span>个人资料</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="publish_add.html" th:href="@{/publish}">
                                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip"
                                             data-placement="right" data-original-title="FAV PAGE">
                                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                                        </svg>
                                        <span>发表动态</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="logged_out.html" th:href="@{/logout}">
                                        <svg class="olymp-logout-icon">
                                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-logout-icon"></use>
                                        </svg>
                                        <span>登出</span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
                <!--数据：当前用户昵称-->
                <a href="person_main.html" class="author-name fn">
                    <div class="author-title">
                        James Spiegel
                        <svg class="olymp-dropdown-arrow-icon">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon"></use>
                        </svg>
                    </div>
                </a>
            </div>
            <!--end导航栏用户-->
        </div>
    </div>
</header>
<!-- ... end Header-BP 结束头部导航栏-->
<!--头部空间-->
<div class="header-spacer"></div>
<!--end头部空间-->
<!-- Top Header-Profile 个人主页头部-->
<div class="container">
    <div class="row">
        <div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="ui-block">
                <div class="top-header">
                    <!--默认个人主页头部背景-->
                    <div class="top-header-thumb">
                        <img src="../../img/top-header1.jpg" th:src="@{/img/top-header1.jpg}" alt="nature">
                    </div>

                    <div class="profile-section">
                        <div class="row">
                            <div class="col col-lg-5 col-md-5 col-sm-12 col-12">
                                <ul class="profile-menu">
                                    <li>
                                        <a href="friends.html" th:href="@{/friend}">好友</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col col-lg-5 ml-auto col-md-5 col-sm-12 col-12">
                                <ul class="profile-menu">
                                    <li>
                                        <a href="photos.html" th:href="@{/photo}">相册</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="control-block-button">
                            <!--事件：发送好友请求/button-->
                            <button class="accept-request bg-blue" title="加为好友">
                                <svg class="olymp-happy-face-icon">
                                    <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                                </svg>
                            </button>
                            <!--事件：建立私信页面/button-->
                            <button class="accept-request bg-purple" title="私信">
                                <svg class="olymp-chat---messages-icon">
                                    <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-chat---messages-icon"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="top-header-author">
                        <!--数据：用户头像、用户昵称-->
                        <a href="person_main.html" class="author-thumb">
                            <img src="../../img/author-main1.jpg" th:src="@{${session.user.getHeadPhoto()}}" alt="author">
                        </a>
                        <div class="author-content">
                            <a href="person_main.html" class="h4 author-name">James Spiegel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ... end Top Header-Profile 结束个人主页头部-->
<!--container个人主页主体-->
<div class="container">
    <div class="row">
        <!-- 中间动态列 -->
        <div class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
            <div id="newsfeed-items-grid">
                <table>
                    <tbody>
                    <tr th:each="publish:${publishes}">
                        <td>
                            <!-- 单条动态 -->
                            <div class="ui-block">
                                <article class="hentry post">
                                    <!--数据：动态发布者昵称、头像、动态发布时间-->
                                    <div class="post__author author vcard inline-items">
                                        <img src="../../img/author-page.jpg" th:src="@{${session.user.getHeadPhoto()}}" alt="author">
                                        <div class="author-date">
                                            <a class="h6 post__author-name fn" href="person_main.html" th:text="${publish.user.uname}" >James
                                                Spiegel</a>
                                            <div class="post__date">
                                                <time class="published" th:text="${publish.pTime}">
                                                    2021/3/25 10:39
                                                </time>
                                            </div>
                                        </div>
                                        <div class="more">
                                            <svg class="olymp-three-dots-icon">
                                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                            </svg>
                                            <ul class="more-dropdown">
                                                <!--数据：动态详情地址-->
                                                <li>
                                                    <a href="publish_detail.html" th:href="@{/publish/{pId}/detail(pId=${publis.pId})}">
                                                        <button class="btn btn-primary btn-sm">查看详情</button>
                                                    </a>
                                                </li>
                                                <!--事件：删除动态-->
                                                <li>
                                                    <a th:href="@{/publish/{pId}/delete(pId=${publish.pId})}">
                                                        <button class="btn btn-primary btn-sm">删除动态</button>
                                                    </a>

                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--数据：动态内容概要-->
                                    <h6 th:text="${publish.pTitle}"></h6>
                                    <p th:text="${publish.pContent}">
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                        fugiat
                                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                                        qui
                                        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste
                                        natus
                                        error sit voluptatem accusantium doloremque.
                                    </p>
                                    <!--数据：动态被赞以及被评论数-->
                                    <div class="post-additional-info inline-items">
                                        <!--事件：点赞处理-->
                                        <button id="greatButton" onclick="greatClick(this)" class="post-add-icon inline-items btn">
                                            <a th:href="@{/publish/{pId}/great(pId=${publish.pId})}">
                                                <svg class="olymp-heart-icon">
                                                    <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                                </svg>
                                                <!--被赞数量-->
                                                <span id="greatNum" th:text="${publish.likeNum}">8</span>
                                            </a>
                                        </button>
                                        <div class="comments-shared">
                                            <button class="post-add-icon inline-items btn">
                                                <a >
                                                    <svg class="olymp-speech-balloon-icon">
                                                        <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>
                                                    </svg>
                                                    <!--被评论数量-->
                                                    <span th:text="${publish.commentNum}">17</span>
                                                </a>

                                            </button>
                                        </div>
                                    </div>
                                </article>
                            </div>
                            <!-- 结束单条动态 -->
                        </td>
                    </tr>


                    </tbody>
                </table>
            </div>
        </div>
        <!-- 结束中间动态列 -->

        <!-- 左侧账号概况 -->
        <div class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
            <!--数据：用户各项信息-->
            <div class="ui-block">
                <div class="ui-block-title">
                    <h6 class="title">账号概况</h6>
                </div>
                <div class="ui-block-content">
                    <!-- W-Personal-Info -->
                    <ul class="widget w-personal-info item-block">
                        <li>
                            <span class="title">个人描述</span>
                            <span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione accusamus fugit dignissimos commodi magni quod sit voluptatem quaerat error! Inventore iste expedita eaque odio dolore esse praesentium dolores aperiam molestiae!</span>
                        </li>
                        <li>
                            <span class="title">昵称</span>
                            <span class="text">James Spiegel</span>
                        </li>
                        <li>
                            <span class="title">账号</span>
                            <span class="text">xxxxxx</span>
                        </li>
                        <li>
                            <span class="title">年龄</span>
                            <span class="text">18</span>
                        </li>
                        <li>
                            <span class="title">性别</span>
                            <span class="text">男</span>
                        </li>
                        <li>
                            <span class="title">积分</span>
                            <span class="text">250</span>
                        </li>
                        <li>
                            <span class="title">等级</span>
                            <span class="text">3</span>
                        </li>
                    </ul>
                    <!-- .. end W-Personal-Info -->
                </div>
            </div>
        </div>
        <!-- 结束左侧账号概况 -->
        <!-- 右侧照片展示-->
        <div class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">
            <div class="ui-block">
                <div class="ui-block-title">
                    <h6 class="title">最近照片</h6>
                </div>
                <!--数据：照片路径-->
                <div class="ui-block-content">
                    <!-- W-Latest-Photo -->
                    <ul class="widget w-last-photo js-zoom-gallery" th:if="${photos} != null">
                        <li th:each="photo:${photos}">
                            <a href="../../img/last-photo1-large.jpg" th:href="@{/photo/{id}/detail(id=photo.photoId)}">
                                <img src="../../img/last-photo1-large.jpg" th:src="@{${photo.photoName}}" alt="photo">
                            </a>
                        </li>

<!--                        <li>-->
<!--                            <a href="../../img/last-photo1-large.jpg">-->
<!--                                <img src="../../img/last-photo1-large.jpg" alt="photo">-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="../../img/last-photo1-large.jpg">-->
<!--                                <img src="../../img/last-photo1-large.jpg" alt="photo">-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="../../img/last-photo1-large.jpg">-->
<!--                                <img src="../../img/last-photo1-large.jpg" alt="photo">-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="../../img/last-photo1-large.jpg">-->
<!--                                <img src="../../img/last-photo1-large.jpg" alt="photo">-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="../../img/last-photo1-large.jpg">-->
<!--                                <img src="../../img/last-photo1-large.jpg" alt="photo">-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="../../img/last-photo1-large.jpg">-->
<!--                                <img src="../../img/last-photo1-large.jpg" alt="photo">-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="../../img/last-photo1-large.jpg">-->
<!--                                <img src="../../img/last-photo1-large.jpg" alt="photo">-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="../../img/last-photo1-large.jpg">-->
<!--                                <img src="../../img/last-photo1-large.jpg" alt="photo">-->
<!--                            </a>-->
<!--                        </li>-->
                    </ul>
                    <!-- .. end W-Latest-Photo -->
                </div>
            </div>
        </div>
    </div>
    <!-- 结束右侧照片展示 -->
</div>
<!--.. end container结束个人主页主体-->

<!--向上返回 按钮-->
<a class="back-to-top" href="#">
    <img src="../../svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
</a>

<script>
    function greatClick(t) {
        // alert("hh") ;
        // $(".post-add-icon").css("fill","") ;
        // $("#greatButton").toggleClass('great-click') ;
        $("#greatButton").css("fill","#ff5e3a") ;
        var num = $("#greatNum").text() ;
        $("#greatNum").text(parseInt(num)+1) ;
    }
</script>

<!-- JS Scripts -->
<div th:replace="/_fragment::footer">
    <script src="../../js/jQuery/jquery-3.4.1.js"></script>
    <script src="../../js/libs/jquery.appear.js"></script>
    <script src="../../js/libs/jquery.mousewheel.js"></script>
    <script src="../../js/libs/perfect-scrollbar.js"></script>
    <script src="../../js/libs/jquery.matchHeight.js"></script>
    <script src="../../js/libs/svgxuse.js"></script>
    <script src="../../js/libs/imagesloaded.pkgd.js"></script>
    <script src="../../js/libs/Headroom.js"></script>
    <script src="../../js/libs/velocity.js"></script>
    <script src="../../js/libs/ScrollMagic.js"></script>
    <script src="../../js/libs/jquery.waypoints.js"></script>
    <script src="../../js/libs/jquery.countTo.js"></script>
    <script src="../../js/libs/popper.min.js"></script>
    <script src="../../js/libs/material.min.js"></script>
    <script src="../../js/libs/bootstrap-select.js"></script>
    <script src="../../js/libs/smooth-scroll.js"></script>
    <script src="../../js/libs/selectize.js"></script>
    <script src="../../js/libs/swiper.jquery.js"></script>
    <script src="../../js/libs/isotope.pkgd.js"></script>
    <script src="../../js/libs/ajax-pagination.js"></script>
    <script src="../../js/libs/circle-progress.js"></script>
    <script src="../../js/libs/loader.js"></script>
    <script src="../../js/libs/run-chart.js"></script>
    <script src="../../js/libs/jquery.magnific-popup.js"></script>
    <script src="../../js/libs/ion.rangeSlider.js"></script>

    <script src="../../js/main.js"></script>
    <script src="../../js/libs-init/libs-init.js"></script>

    <script src="../../Bootstrap/dist/js/bootstrap.bundle.js"></script>
</div>



</body>

</html>